<template>
	<view class="c-row-box">
		<view class="c-row-head">
			<view class="c-row-title">中款{{exchangeType == 1? '收款' : '付款'}}</view>
		</view>
		<view class="c-row-item">
			<view class="c-row c-row-list">
				<view class="c-row-col c-row-col-list-item">
					<view class="col-title"><text style="color: red;">*</text>{{exchangeType == 1? '收款' : '付款'}}金额</view>
					<view class="col-text">
						<input type="text" v-model="hotelProtocol.middle_money" @input="getTailMoney"
							placeholder="请输入" :disabled="isPreview"/>
					</view>
				</view>
			</view>
			<view class="c-row c-row-list">
				<view class="c-row-col c-row-col-list-item">
					<view class="col-title"><text style="color: red;">*</text>{{exchangeType == 1? '收款' : '付款'}}时间</view>
					<view class="col-text">
						<picker mode="date" :start="startDate" :end="endDate" @change="middleDateChange" :disabled="isPreview">
							<view>
								{{hotelProtocol.middle_money_date == '' ? '请选择' : hotelProtocol.middle_money_date}}
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			exchangeType: {
				type: Number,
				default() {
					// 1:代表收款;2:代表付款
					return 1;
				}
			},
			isPreview: {
				type: Boolean,
				default(){
					return false
				}
			},
			hotelProtocol: {
				type: Object,
				default () {
					return {}
				}
			},
			startDate: {
				type: String,
				default () {
					return ''
				}
			},
			endDate: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {

			};
		},
		methods:{
			// 中款收款日期
			middleDateChange(e) {
				this.hotelProtocol.middle_money_date = e.target.value
			},
			
			// 获取尾款
			getTailMoney(){
				this.$emit('getTailMoney')
			}
		}
	}
</script>

<style lang="less">
	@import url('../../../order/createOrder/components/common.less');
	@import url('../../../order/components/common.less');
</style>
